<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .active {
        color: red;
      }
    </style>
  </head>
  <body>
    <!-- 
    动态组件：
      通过特殊元素 component 来实现，给它传递不同的 is 属性，来实现切换组件渲染的效果

      语法：

        <component is="xxx"></component>
          xxx:
            1. 组件的名字
            2. 组件的配置对象

      基础案例：
        Tab选项卡切换的效果
   -->

    <div id="app"></div>

    <script src="../lib/vue-3.js"></script>

    <script>
      const app = Vue.createApp({
        data() {
          return {
            tabs: [
              { id: 1, name: "Home" },
              { id: 2, name: "About" },
              { id: 3, name: "Contact" },
            ],
            curTabName: "Home", // 用于表示当前高亮的TabName
          };
        },

        template: `
          <div>
            <button 
              v-for="tab in tabs" 
              :class="{ active: tab.name === curTabName }"
              @click="curTabName = tab.name"
              >
              {{ tab.name }}
            </button>
            <hr />

            <!--
            <Home v-if="curTabName === 'Home'" />
            <About v-if="curTabName === 'About'" />
            <Contact v-if="curTabName === 'Contact'" />
            -->

            <component :is="curTabName" />
          </div>
        `,
      });

      // 分别创建三个组件
      app.component("Home", {
        template: `
          <h1>首页</h1>
        `,
        mounted() {
          console.log("Home mounted");
        },
        unmounted() {
          console.log("Home unmounted");
        },
      });
      app.component("About", {
        template: `
          <h1>关于页面</h1>
        `,
        mounted() {
          console.log("About mounted");
        },
        unmounted() {
          console.log("About unmounted");
        },
      });
      app.component("Contact", {
        template: `
          <h1>联系我们</h1>
        `,
        mounted() {
          console.log("Contact mounted");
        },
        unmounted() {
          console.log("Contact unmounted");
        },
      });

      app.mount("#app");
    </script>
  </body>
</html>
